<!-- 模块说明 -->
<template>
  <div class="container">
    <div class="login-box">
      <div class="img-box">
        <img src="../assets/login.jpg">
      </div>
      <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" label-width="100px" class="login-form">
        <el-form-item label="用户名" prop="user">
          <el-input v-model="loginForm.user"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="loginForm.pwd" show-password @keyup.enter.native="toLogin"></el-input>
        </el-form-item>
        <el-form-item class="login-btn">
          <el-button type="primary" @click="toLogin" >登录</el-button>
          <el-button @click="toRegist">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { userRegist, userLogin } from '@/api/login.js'

export default {
  // 组件注册
  name: 'myLogin',
  components: {},
  mixins: [],
  props: [],
  data () {
    const checkPwd = (rule, value, cb) => {
      // \d+：最少一个的任意数字，azAZ+：最少一个的任意字母，[xxxxx]+最少一个的任意xxx，|：或，{6,16}：6-16位
      const regPwd = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{6,16}$/
      // 若密码格式合规则正常返回
      if (regPwd.test(value)) return cb()
      // 否则返回错误
      return cb(new Error('请输入6-16位数字、字母、符号的组合密码'))
    }
    return {
      loginForm: {
        user: '',
        pwd: ''
      },
      loginFormRules: {
        user: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkPwd, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    async regist (userForm) {
      const { data } = await userRegist(userForm)
      if (data.status === 233) {
        this.$notify({
          title: '注册失败',
          type: 'error',
          message: data.data
        })
        return
      }
      // 否则注册成功
      this.$notify({
        title: '注册成功',
        type: 'success'
      })
    },
    async login (userForm) {
      const { data } = await userLogin(userForm)
      console.log(data)
      if (data.status === 302) {
        this.$notify({
          title: '登录失败',
          type: 'error',
          message: data.msg
        })
        return
      } else if (data.status === 333) {
        this.$notify({
          title: '登录失败',
          type: 'error',
          message: data.msg
        })
        return
      }
      // 否则登录成功
      this.$store.commit('changeUser', {
        user: data.data.user,
        id: data.data.id
      })
      this.$router.push('/big_file')
      console.log(this.$store.state.user)
      this.$notify({
        title: '登录成功',
        type: 'success'
      })
    },
    toRegist () {
      console.log(this.loginForm)
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) {
          this.$notify({
            title: '错误',
            type: 'error',
            message: '请输入合规的用户名和密码'
          })
          return
        }
        // 否则校验成功
        this.regist(this.loginForm)
      })
    },
    toLogin () {
      console.log(this.loginForm)
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) {
          this.$notify({
            title: '错误',
            type: 'error',
            message: '请输入合规的用户名和密码'
          })
          return
        }
        // 否则校验成功
        this.login(this.loginForm)
      })
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {},
  destroyed () {}
}
</script>
<style lang="less" scoped>
  .login-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 300px;
    border-radius: 10px;
    background-color: #f1eded;
    box-shadow: 3px 3px 3px #bbb;
    .img-box {
      position: absolute;
      width: 130px;
      height: 130px;
      padding: 10px;
      top: -50%;
      left: 50%;
      transform: translate(-50%, 50%);
      border-radius: 50%;
      box-shadow: 3px 3px 3px #bbb;
      border: 1px dashed #eee;
      // background-image: url('../assets/login.jpg');
      // background-repeat: no-repeat;
      // background-position: center, center;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .login-form {
      position: absolute;
      bottom: 0px;
      width: 100%;
      padding: 20px;
      box-sizing: border-box
    }
  }
  .login-btn {
    display: flex;
    justify-content: flex-end;
  }
</style>
